<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header"></head>
<style>
    /*重新设置样式*/
    .form-control {
        width: 196px !important;
        height: 34px !important;
        padding: 10px !important;
    }

</style>
<body class="hold-transition skin-blue sidebar-mini">
<section class="content-header">
    <h1 th:if="${mode}==null" style="display: inline-block">外购件库出入库综合查询</h1>
    <h1 th:if="${mode} eq 'index_in'" style="display: inline-block">集团物资部月入库金额</h1>
    <h1 th:if="${mode} eq 'index_out'" style="display: inline-block">集团物资部月出库金额</h1>
    <h1 th:if="${totalPrice} != null" style="display: inline-block">&nbsp;&nbsp;总金额：</h1>
    <h1 th:if="${totalPrice} != null" th:text="${totalPrice}" style="display: inline-block"></h1>
    <h1 th:if="${totalPrice} != null" style="display: inline-block">万元</h1>
</section>
<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header">
                    <form id="queryForm">
                        <div class="row">
                            <div class="form-inline">
                                <div class="form-group" style="margin-right: 10px; margin-bottom: 5px">
                                    <label>单据编号</label>
                                    <input style="width: 130px" type="text" name="odrCode" class="form-control"
                                           placeholder="请输入项目编号">
                                    <input name="mode" type="hidden" style="display: none"  />
                                </div>
                                <div class="form-group" style="margin-right: 10px; margin-bottom: 5px">
                                    <label>项目编号</label>
                                    <input style="width: 130px" type="text" name="odaProCode" class="form-control"
                                           placeholder="请输入项目编号">
                                </div>
                                <div class="form-group" style="margin-right: 10px; margin-bottom: 5px">
                                    <label>项目名称</label>
                                    <input style="width: 130px" type="text" name="odaProName" class="form-control"
                                           placeholder="请输入项目名称">
                                </div>
                                <div class="form-group" style="margin-right: 10px; margin-bottom: 5px">
                                    <label>SAP物料编码</label>
                                    <input style="width: 220px" type="text" name="odaSapCode" class="form-control"
                                           placeholder="请输入SAP物料编码">
                                </div>
                                <div class="form-group" style="margin-right: 10px; margin-bottom: 5px">
                                    <label>物料描述</label>
                                    <input style="width: 220px" type="text" name="odaMatDesc" class="form-control"
                                           placeholder="请输入物料描述">
                                </div>


                                <div class="form-group" style="margin-right: 10px; margin-bottom: 5px">
                                    <label>跟踪号</label>
                                    <input style="width: 120px" type="text" name="odaTrackCode" class="form-control"
                                           placeholder="请输入跟踪号">
                                </div>
                                <div class="form-group" style="margin-right: 10px; margin-bottom: 5px">
                                    <label>制单人</label>
                                    <input style="width: 120px" type="text" name="name" class="form-control"
                                           placeholder="请输入制单人">
                                </div>
                                <div class="form-group" style="margin:0px 5px 5px 5px">
                                    <label class="control-label" style="text-align: right">领料人</label>
                                    <input type="text" name="odrTakePerson"
                                           class="form-control"
                                           placeholder="请输入领料人信息"/>
                                </div>
                                <div class="form-group" style="margin:0px 5px 5px 5px">
                                    <label class="control-label" style="text-align: right">区位</label>
                                    <input type="text" name="odaPosition"
                                           class="form-control"
                                           placeholder="请输入区位"/>
                                </div>
                                <div class="form-group" style="margin:0px 5px 5px 5px">
                                    <label class="control-label" style="text-align: right">箱号</label>
                                    <input type="text" name="odaCaseNo"
                                           class="form-control"
                                           placeholder="请输入区位"/>
                                </div>
                                <div class="form-group" style="margin-right: 10px; margin-bottom: 5px">
                                    <label>领料部门</label>
                                    <input style="width: 130px" type="text" name="depName" class="form-control"
                                           placeholder="请输入领料部门">
                                </div>
                                <div class="form-group" style="margin-right: 10px; margin-bottom: 5px">
                                    <label>合同编号</label>
                                    <input style="width: 130px" type="text" name="contractNo" class="form-control"
                                           placeholder="请输入合同编号">
                                </div>
                                <div class="form-group" style="margin-right: 10px; margin-bottom: 5px">
                                    <label>仓库</label>
                                    <select style="padding: 0px!important;text-align: center!important;text-align-last: center!important;width: auto!important;"
                                            id="odaWhiId" name="odaWhiId" class="form-control">
                                    </select>
                                </div>
                                <div th:if="${mode} == null" class="form-group"
                                     style="margin-right: 10px; margin-bottom: 5px">
                                    <label>出入库类型</label>
                                    <select name="inOutType" class="form-control"
                                            style="padding: 0px!important;text-align: center!important;text-align-last: center!important;width: 90px!important;">
                                        <option value="1">入库</option>
                                        <option value="2">出库</option>
                                        <option value="0" selected="selected">全部</option>
                                    </select>
                                </div>
                                <div th:if="${mode} eq 'index_in'" class="form-group"
                                     style="margin-right: 10px; margin-bottom: 5px">
                                    <label>出入库类型</label>
                                    <select name="inOutType" class="form-control"
                                            style="padding: 0px!important;text-align: center!important;text-align-last: center!important;width: 90px!important;">
                                        <option value="1">入库</option>
                                    </select>
                                </div>
                                <div th:if="${mode} eq 'index_out'" class="form-group"
                                     style="margin-right: 10px; margin-bottom: 5px">
                                    <label>出入库类型</label>
                                    <select name="inOutType" class="form-control"
                                            style="padding: 0px!important;text-align: center!important;text-align-last: center!important;width: 90px!important;">
                                        <option value="2">出库</option>
                                    </select>
                                </div>
                                <div class="form-group" style="margin-right: 10px; margin-bottom: 5px">
                                    <label>单据类型</label>
                                    <select name="billType" class="form-control"
                                            style="padding: 0px!important;text-align: center!important;text-align-last: center!important;width: 90px!important;">
                                        <option value="1">采购入库</option>
                                        <option value="5">车间返料</option>
                                        <option value="6">串料剩余</option>
                                        <option value="7">项目完结剩余</option>
                                        <option value="2">领料出库</option>
                                        <option value="4">调拨出库</option>
                                        <option value="3">串料出库</option>
                                        <option value="8">调拨入库</option>
                                        <option value="0" selected="selected">全部</option>
                                    </select>
                                </div>
                                <!--                                <div class="form-group" style="margin-right: 10px;margin-bottom: 5px;">-->
                                <!--                                    <label>在库类型</label>-->
                                <!--                                    <select style="padding: 0px!important;text-align: center!important;text-align-last: center!important;width: auto!important;"-->
                                <!--                                            class="form-control select"-->
                                <!--                                            name="ityStockType">-->
                                <!--                                        <option value="">全部</option>-->
                                <!--                                        <option value="1">库存在库</option>-->
                                <!--                                        <option value="2">项目在库</option>-->
                                <!--                                    </select>-->
                                <!--                                </div>-->
                                <div class="form-group" style="margin-right: 10px; margin-bottom: 5px">
                                    <label>制单日期</label>
                                    <input style="width: 100px!important;text-align:center" type="text"
                                           class="form-control datepicker"
                                           name="pStartDate"
                                           id="pStartDate"
                                           readonly="readonly"/>
                                    <label>至</label>
                                    <input style="width: 100px!important;text-align:center" type="text"
                                           class="form-control datepicker"
                                           name="pEndDate"
                                           id="pEndDate"
                                           readonly="readonly"/>
                                </div>
                                <div class="form-group" style="margin-right: 10px; margin-bottom: 5px">
                                    <button type="button" class="btn btn-success" id="btn-search">
                                        <span class="Bold">搜索</span>
                                    </button>
                                </div>

                            </div>
                        </div>
                    </form>
                </div>
                <div id="toolbar" class="form-group">
                    <button type="button" id="btn_exportExcel" style="width: 82px;height: 34px"
                            shiro:hasPermission="purwar:purwarquery:export"
                            class="btn btn-primary">
                        导出
                    </button>
                    <img th:src="@{/img/downloadding.gif}" id="btn_tips" style="display: none"/>
                </div>
                <div class="box-body">
                    <table id="bootstrap-table" style="table-layout: fixed;"></table>
                </div>
            </div>
        </div>
    </div>
</section>
<div th:include="include :: footer"></div>
<script th:inline="javascript">
    var mode = [[${mode}]]
    var table;
    /**
     * 加载仓库列表
     */
    function loadWhListT() {
        $.post(ctx + 'common/warehouseInfo/list',
            {}
            , function (result) {
                $('#odaWhiId').empty();
                $('#odaWhiId').append('<option value="" selected="selected">全部</option>');
                //selected="selected"是默认某一个仓库
                for (var i = 0; i < result.data.rows.length; i++) {
                    $('#odaWhiId').append('<option value="' + result.data.rows[i].whiId + '"  >' + result.data.rows[i].whiName + '</option>');
                }
            }, '')
    }

    /**
     * 有权看钱没权看星
     * */
    function displayMoney(value) {
        if (hasP('purwar:amount:view')) {
            if (value == undefined || value == null) {
                return "--";
            }
            //调用保留三位小数的四舍五入
            return xyh.rounding(value, 1000);
        } else {
            return '***';
        }
    }


    $(function () {
        $("title").html($("title").html() + " —— 外购件出入库综合查询");
        $("#pStartDate").val([[${start}]]);
        $("#pEndDate").val([[${end}]]);
        $("#pStartDate").datepicker('setDate', [[${start}]]);
        $("#pEndDate").datepicker('setDate', [[${end}]]);

        // $("#btn_displayModelSwitch").click(function () {
        //     let brn_text = $(this).html()
        //     if(brn_text=='简略信息'){
        //         $(this).html('全部信息');
        //         $("p[name='tableTdContent']").attr("data-style",$("p[name='tableTdContent']").attr("style"));
        //         $("p[name='tableTdContent']").attr("style","white-space:nowrap;overflow:hidden;text-overflow:ellipsis;");
        //     }else {
        //         $(this).html('简略信息');
        //         $("p[name='tableTdContent']").attr("style",$("p[name='tableTdContent']").attr("data-style"));
        //     }
        // });
        /**
         * 有权看钱没权看星
         * */
        function displayMoney(value) {
            if (hasP('purwar:amount:view')) {
                if (value == undefined || value == null) {
                    return "--";
                }
                return '<p name="tableTdContent" style="word-wrap: break-word;width: 40px">'+value+'</p>';
            } else {
                return '***';
            }
        }
        /**
         * 就绪函数
         * 第二步放到就绪函数里
         */
        loadWhListT();
        /**
         * 加载列表
         */
        table = js.table.init({
            url: ctx + "purWarQuery/list",
            pageSize: 300,
            showColumns: true,
            showExport: false,
            onLoadSuccess: function (){
                $('#btn-search').prop('disabled', false).removeClass('disabled');
            },
            columns: [
                {
                    title: '序号', field: 'ityId', width: '50',
                    formatter: function (value, row, index) {
                        return index + 1;
                    }
                },
                {title: '单据类型', field: 'billTypeText', width: '75'},
                {
                    title: '单据编号', field: 'odrCode', width: '80', formatter: function (value, row, index) {
                        if (value == undefined || value == null) {
                            value = "--";
                        }
                        return '<p name="tableTdContent" style="word-wrap: break-word;width: 70px">' + value + '</p>';
                    }
                },
                {
                    title: '物料描述', field: 'odaMatDesc', width: '100', formatter: function (value, row, index) {
                        return '<p name="tableTdContent" style="word-wrap: break-word;width: 90px">' + value + '</p>';
                    }
                },
                {
                    title: 'SAP<br>物料编码', field: 'odaSapCode', width: '80', formatter: function (value, row, index) {
                        if (value == undefined || value == null) {
                            value = "--";
                        }
                        return '<p name="tableTdContent" style="word-wrap: break-word;width: 70px">' + value + '</p>';
                    }
                },
                {
                    title: '数量', field: 'odaNum', width: '50', formatter: function (value, row, index) {
                        if (value == undefined || value == null) {
                            value = "--";
                        }
                        return '<p name="tableTdContent" style="word-wrap: break-word;width: 40px">' + value + '</p>';
                    }
                },
                {title: '单位', field: 'odaNumUnit', width: '50'},//数量单位
                {
                    title: '单价<br>（元）', field: 'odaNumPrice', width: '60', formatter: function (value, row, index) {
                        return displayMoney(value);
                    }
                },
                {
                    title: '金额<br>（元）', field: 'odaTotalPrice', width: '60', formatter: function (value, row, index) {
                        return displayMoney(value);
                    }
                },
                {
                    title: '供应商', field: 'odaBrand', width: '80px', formatter: function (value, row, index) {
                        if (value == undefined || value == null) {
                            value = "--";
                        }
                        return '<p name="tableTdContent" style="word-wrap: break-word;width: 70px">' + value + '</p>';
                    }
                },
                {
                    title: '项目编号', field: 'odaProCode', width: '75', formatter: function (value, row, index) {
                        if (value == undefined || value == null) {
                            value = "--";
                        }
                        return value;
                    }
                },
                {
                    title: '项目名称', field: 'odaProName', width: '90', formatter: function (value, row, index) {
                        if (value == undefined || value == null) {
                            value = "--";
                        }
                        return '<p name="tableTdContent" style="word-wrap: break-word;width: 80px">' + value + '</p>';
                    }
                },
                {title: '跟踪号', field: 'odaTrackCode', width: '95'},
                {
                    title: '仓库', field: 'whiName', width: '70', formatter: function (value, row, index) {
                        if (value == undefined || value == null) {
                            value = "--";
                        }
                        return '<p name="tableTdContent" style="word-wrap: break-word;width: 60px">' + value + '</p>';
                    }
                },
                {
                    title: '区位', field: 'odaPosition', width: '50', formatter: function (value, row, index) {
                        if (value == undefined || value == null) {
                            value = "--";
                        }
                        return '<p name="tableTdContent" style="word-wrap: break-word;width: 40px">' + value + '</p>';
                    }
                },{
                    title: '箱号', field: 'odaCaseNo', width: '50', formatter: function (value, row, index) {
                        if (value == undefined || value == null) {
                            value = "--";
                        }
                        return '<p name="tableTdContent" style="word-wrap: break-word;width: 40px">' + value + '</p>';
                    }
                },
                {
                    title: '机械<br>备件库<br>备注<br>类型', field: 'odaRemarkType', width: '70', formatter: function (value, row, index) {
                        if (value == undefined || value == null) {
                            value = "--";
                        }
                        return '<p name="tableTdContent" style="word-wrap: break-word;width: 40px">' + value + '</p>';
                    }
                },
                {title: '制单日期', field: 'odrMakeDate', width: '90'},
                {
                    title: '合同编号', field: 'contractNo', width: '70', formatter: function (value, row, index) {
                        if (value == undefined || value == null) {
                            value = "--";
                        }
                        return '<p name="tableTdContent" style="word-wrap: break-word;width: 60px">' + value + '</p>';
                    }
                },
                {title: '领料<br>部门', field: 'depName', width: '70'},
                {title: '制单人', field: 'name', width: '70'},
                {
                    title: '领料人', field: 'odrTakePerson', width: '70', formatter: function (value, row, index) {
                        if (value == undefined || value == null) {
                            value = "--";
                        }
                        return '<p name="tableTdContent" style="word-wrap: break-word;width: 60px">' + value + '</p>';
                    }
                },
                {
                    title: '操作', field: 'odaOdrId', width: '70',
                    formatter: function (value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-xs btn-info" href="' + ctx + 'purWarQuery/info/' + value + '"> 查看</a> ');
                        return actions.join('');
                    }
                }
            ]
        });

        /**
         * 表格搜索
         */
        $("#btn-search").click(function () {
            $('#btn-search').prop('disabled', true).addClass('disabled');
            js.table.search(table);
        });
        /**
         *@Description: 导出
         */
        $("#btn_exportExcel").click(function () {
            $("#btn_exportExcel").hide();
            $("#btn_tips").show();
            if (mode==null){
                $("#queryForm [name='mode']").val("外购件库出入库综合查询");
            }else if (mode=='index_in'){
                $("#queryForm [name='mode']").val("集团物资部月入库金额");
            }else if (mode=='index_out'){
                $("#queryForm [name='mode']").val("集团物资部月出库金额");
            }
            js.post({
                url: ctx + "purWarQuery/exportExcel",
                data: $("#queryForm").serialize(),
                success: function (result) {
                    if (result.type === web_status.SUCCESS) {
                        location.href=ctx + "purWarQuery/downloadExportExcel/"+result.data;
                    } else {
                        js.modal.warning("导出失败，请联系管理员！");
                    }
                    $("#btn_tips").hide();
                    $("#btn_exportExcel").show();
                }
            })
        });
    })
    ;
</script>
</body>
</html>